<template>
    <el-card shadow="never">
        <template #header>
            <div class="card_header">
                <b>申请方向</b>
                <!-- <el-page-header content="detail" /> -->
            </div>
        </template>
        <el-form class="update_form" status-icon ref="ruleFormRef" :model="contentForm" :rules="rules"
            label-width="120px">
            <el-form-item label="申请方向" prop="position">
                <el-select v-model="contentForm.position" placeholder="Select">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
                        :disabled="item.disabled" />
                </el-select>
            </el-form-item>
            <el-form-item label="标题" prop="title">
                <el-input v-model="contentForm.title" />
            </el-form-item>
            <el-form-item label="文档" prop="reason">
                <el-input v-model="contentForm.reason" />
            </el-form-item>
            <input type="hidden" name="" value="" />
            <el-form-item label="文件" prop="reason">
                <el-upload class="upload-demo"
                    accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
                    drag :action="uploadUrl" :data="approveData" :limit="1" :on-exceed="handleExceed"
                    :headers="headerObj" ref="uploadRef" :auto-upload="false">
                    <el-icon class="el-icon--upload">
                        <icons name="upload-filled"></icons>
                    </el-icon>
                    <div class="el-upload__text">
                        拖动文件到这 或者 <em>点击上传</em>
                    </div>
                    <template #tip>
                        <div class="el-upload__tip">
                            只允许 doc/docx 文件类型且大小不超过 10 MB
                        </div>
                    </template>
                </el-upload>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>


<script >
import { ElMessage } from 'element-plus'
import Icons from '../../components/Icons.vue'
import { reactive, ref, computed } from 'vue'
import { approveService } from '../../interfaces/service'


export default {
    component: {},
    setup(props) {


        const ruleFormRef = ref(null)
        const contentForm = reactive({})

        // 表单规则
        const rules = reactive({
            position: [
                { required: true, message: '请选择申请方向', trigger: 'blur' },
            ],
            title: [
                { required: true, message: '标题不能为空', trigger: 'blur' },
            ],
            reason: [
                { required: true, message: '理由不能为空', trigger: 'blur' },
            ],
        })

        const options = [{
            value: '共青团员',
            label: '共青团员',
        },
        {
            value: '入党积极分子',
            label: '入党积极分子',
            // disabled: true,
        },
        {
            value: '中共党员',
            label: '中共党员',
        },
        {
            value: '书记',
            label: '书记',
        },
        {
            value: '主席',
            label: '主席',
        },]

        // 在提交控件上添加头部信息
        const jwtToken = sessionStorage.getItem("jwt");
        let headerObj = null
        if (jwtToken) {
            headerObj = {
                "Authorization": `Bearer ${jwtToken}`
            };
        } else {
            router.push({ name: 'Login' })
        }

        // 提交表单
        const submitForm = (formEl) => {
            if (!formEl) return
            formEl.validate((valid, fields) => {
                if (valid) {
                    approveService.addApprove(contentForm)
                        .then(res => {
                            if (res.success) {
                                ElMessage.success("添加成功");
                                // 文件上传
                                approveData.value.id = res.data
                                uploadRef.value.submit();
                                formEl.resetFields();
                            }
                        })
                } else {
                    // 表单验证未通过
                }
            })
        }

        let approveData = ref({
            "id": 0
        });
        let uploadUrl = computed(() => import.meta.env.VITE_APP_BASE_API + '/api/approve/upload');

        const resetForm = (formEl) => {
            if (!formEl) return;
            formEl.resetFields()
        }

        const uploadRef = ref(null)
        const handleExceed = (files) => {
            if (uploadRef.value) {
                uploadRef.value.clearFiles()
                const file = files[0]
                // file.uid = genFileId()
                uploadRef.value.handleStart(file)
            }
        }


        return {
            rules,
            options,
            contentForm,
            ruleFormRef,
            uploadRef,
            headerObj,
            approveData,
            uploadUrl,
            resetForm,
            submitForm,
            handleExceed,
        }
    }
}


</script>



<style lang="scss" scoped>
.update_form {
    width: 50%;
}
</style>